<template>
  <div class="flex">
    <section>
      <div class="flex-row">
        <div class="over col-md-6">
          <call-in-plan v-ref:left></call-in-plan>
        </div>
        <div class="btn-group-vertical" style="margin-left: 5px;">
          <button class="btn btn-success" @click="addRight()"> &gt;</button>
          <button class="btn btn-success" @click="addLeft()"> &lt; </button>
        </div>
        <div class="span-row over col-md-6">
          <user-file-list v-ref:right></user-file-list>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import CallInPlan from './CallInPlan'
import UserFileList from './UserFileList'

export default {
  title: '预约计划生成',
  props: ['f'],
  data () {
    return {
      model: {}
    }
  },

  methods: {
    // 向右边调整
    addRight () {
      if (this.$refs.left.selected !== null) {
        // 压入数组中
        if (this.$refs.left.selected !== this.leftInfor) {
          this.$refs.right.model.rows.push(this.$refs.left.selected)
          this.$refs.left.model.rows.$remove(this.$refs.left.selected)
        }
      }
    },
    // 向左边调整
    addLeft () {
      // 为调整的数据添加标记
      if (this.$refs.right.selected !== null) {
        // 压入数组中
        if (this.$refs.right.selected !== this.rightInfor) {
          this.$refs.left.model.rows.push(this.$refs.right.selected)
          this.$refs.right.model.rows.$remove(this.$refs.right.selected)
        }
      }
    }
  },
  components: { CallInPlan, UserFileList }
}
</script>
